<template>
  <div class="app-container">
    <!-- ECharts 图表示例 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <scm-bar title="项目数量统计（年）" xAxisData="12345" seriesData="" height="400px"/>
        </el-card >
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>数据可视化示例</span>
            </div>
          </template>
          <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup >
import ScmBar from "@/views/scm/dashboard/scmBar.vue";

const { proxy } = getCurrentInstance();
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const chartContainer = ref(null)
let chartInstance = null

function goTarget(url) {
  window.open(url, '_blank')
}

// 初始化图表
const initChart = () => {
  chartInstance = echarts.init(chartContainer.value)

  const option = {
    title: {
      text: '销售数据概览'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['销售额', '订单量']
    },
    xAxis: {
      type: 'category',
      data: ['一月', '二月', '三月', '四月', '五月', '六月',  '七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110]
      },
      {
        name: '订单量',
        type: 'line',
        data: [20, 30, 25, 15, 12, 18]
      }
    ]
  }

  chartInstance.setOption(option)
}

// 窗口大小调整时重绘图表
const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', resizeChart)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  if (chartInstance) {
    chartInstance.dispose()
  }
})



</script>

<style scoped>

</style>